<template>
  <div class="show" v-loading="loading">
    <div class="title">个人信息</div>
    <p style="margin-left:6%;margin-top:5%">账号:<span style="margin-left:3%;line-height:20px">{{userInfo.account}}</span></p>
    <p style="margin-left:6%;margin-top:5%">姓名:<span style="margin-left:3%;line-height:20px">{{userInfo.adminName}}</span></p>
    <p style="margin-left:6%;margin-top:5%">性别:<span style="margin-left:3%;line-height:20px">{{userInfo.sex}}</span></p>
    <p style="margin-left:6%;margin-top:5%">联系电话:<span style="margin-left:3%;line-height:20px">{{userInfo.tel}}</span></p>
    <p style="margin-left:6%;margin-top:5%">邮箱地址:<span style="margin-left:3%;line-height:20px">{{userInfo.email}}</span></p>
    <p style="margin-left:6%;margin-top:5%">身份证号:<span style="margin-left:3%;line-height:20px">{{userInfo.cardId}}</span></p>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, ref} from "vue";

export default {
  name: "userInfo",
  setup(){
    const {proxy} = getCurrentInstance()
    let userInfo = ref({})
    let loading = ref(false)
    onMounted(()=>{
      getUserInfo()
    })
    function getUserInfo(){
      loading.value = true
      proxy.$axios.get(
          // eslint-disable-next-line no-undef
          `/admin/${$cookies.get("id")}`
      ).then(
          response => {
            userInfo.value = {...response.data}
            loading.value = false
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }
    return{
      userInfo,
      loading
    }
  }
}
</script>

<style scoped>
.show{
  margin: 100px auto;
  width: 80%;
  height: 370px;
  border: 5px solid lightcyan;
  transition: all 0.9s;
  border-radius: 10px;
}

.show:hover{
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  margin-top: 90px;
}
.title {
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
  color: #2CD9D9FF;
  display: flex;
  justify-content: center;
}
</style>